<!--乘车人列表页-->
<template>
    <div style="height: 100%;">
        <m-page-list
                :option="option"
                :page="page"
                :total="total"
                :table-data="tableData"
                :table-loading="tableLoading"
                v-model:value="query"
                @col-btn-click="colBtnClick"
                @search-data="searchData"
        />
        <m-dialog-form ref="dialogRef" :data="dialogData" v-model:show="dialogShow" :option="dialogOption" @confirm="dialogConfirm" ></m-dialog-form>
    </div>
</template>

<script setup>

  import {ref,reactive,onMounted,nextTick,watch ,onActivated} from 'vue'
  import {onBeforeRouteLeave ,useRoute} from 'vue-router'
  //组件
  import MPageList from '@/components/PageList'
  import MDialogForm from '@/components/DialogForm/DialogForm'
  //请求
  import {getPassenger, addPassenger,editPassenger,delPassenger} from '@/request/api/basicData'

  import {usePageList} from "../../composables/pageList";
  import {useRouteQuery} from "../../composables/routeQuery";

  const route = useRoute();

  let opts = {
    auth_id: 'passengers',
    getApi: getPassenger,addApi:addPassenger,editApi:editPassenger,delApi:delPassenger,
    idKey: 'passengers_id',
    stopMounted: true
  };
  let {option,page,total,tableLoading,tableData,query,dialogRef,dialogShow,dialogData,dialogOption,
    colBtnClick,searchData,getDataList,dialogConfirm} = usePageList(opts);

  useRouteQuery(onRouteQueryChange)
  option.conditions = [
    {label: '乘车人名称',type: 'text',field_id: 'passengers_name',col: 12},
    {label: '监护人手机',type: 'number',field_id: 'guardian_phone',col: 12},
    {label: '证件号码',type: 'text',field_id: 'identification_no',col: 12},
    {label: '客户编号',type: 'text',field_id: 'customer_id',col: 12},
  ];
  option.titleList = [
    {name: '客户',path: '/customer'},
    {name: '乘车人',path: '/passenger'}
  ];
  option.hLBtns = [];
  option.colBtns = [];
  option.cols = [
    {prop: 'passengers_id', label: '乘车人编号',},
    {prop: 'passengers_name', label: '乘车人名称',},
    {prop: 'class_', label: '班级',},
    {prop: 'identification_type_id', label: '证件类型编号',},
    {prop: 'identification_type_name', label: '证件类型名称',},
    {prop: 'identification_no', label: '证件号码',},
    {prop: 'leave_school_id', label: '下车接送方式编号',},
    {prop: 'leave_school_name', label: '下车接送方式名称',},
    {prop: 'pictures_link', label: '照片',type: 'picture',hidePic:true},
    {prop: 'guardian_phone', label: '监护人手机',},
    {prop: 'customer_id', label: '客户编号',},
    {prop: 'input_id',label: '录入员号' },
    {prop: 'input_name',label: '录入员名' },
    {prop: 'input_time',label: '录入时间' },
    {prop: 'modify_id',label: '修改员号' },
    {prop: 'modify_name',label: '修改员名' },
    {prop: 'modify_time',label: '修改时间' },
  ];
  dialogOption.fieldList = [

  ];

  function onRouteQueryChange(routeQuery){
    query.value = routeQuery;
    getDataList();
  }

  /*let routeQuery = ref(null);
  watch(routeQuery,(val) =>{
    //路由参数变化触发方法
    console.log('路由参数变化',route.query);
    //页面条件赋值
    query.value = route.query;
    getDataList();
  })
  onBeforeRouteLeave(to => {
    //离开当前路由停止监听路由
    stopWatchRoute();
  });
  let stopWatchRoute = null;
  onActivated(() => {
    //进入该页面监听路由变化
    stopWatchRoute = watch(() => route.fullPath,
      (newValue, oldValue) => {
        routeQuery.value = newValue
        console.log('路由参数变化',newValue);
        //页面条件赋值
        // query.value = route.query;
        // getDataList();
      },
      { immediate: true }
    )
  })*/

</script>

<style scoped>

</style>
